.search-box {
  display: flex;
  margin-left: 0px !important;
  padding: 10px 56px 10px 50px;
  justify-content: space-between;
  align-items: center;
}

.search {
  display: flex;
  align-items: center;
}

.Screening:hover {
  cursor: pointer;
}

.search:hover {
  cursor: pointer;
}

.button {
  position: absolute;
  top: 0px;
  right: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: #fffff0;
  // border: none;
  border-radius: 20px;
  padding: 5px 20px;
}

.button:hover {
  position: absolute;
  top: 0px;
  right: 10px;
  background-color: rgba($color: #82e5ff, $alpha: .55);
  color: #fffff0;
  border-color: #82e5ff;
  border-radius: 20px;
  padding: 5px 20px;
}

::v-deep .common-layout {
  position: relative;

  .zhcontents {
    margin: 0 !important;
    height: calc(100% - 0px) !important;

    position: relative;

    // overflow: hidden;
    .pagination {
      position: absolute;
      right: 0px;
      bottom: -34px !important;

      .pagination {
        position: absolute;
        right: 0px;
        bottom: 0px !important;
      }
    }
  }

  // padding: 30px !important;
  .zhcontent {
    margin: 0 !important;
    height: calc(100% - 50px) !important;

    position: relative;

    // overflow: hidden;
    .pagination {
      position: absolute;
      right: 0px;
      bottom: -34px !important;

      .pagination {
        position: absolute;
        right: 0px;
        bottom: 0px !important;
      }
    }
  }
}

.content {
  height: calc(100% - 55px) !important;
  // height: 100%;
  overflow: hidden;
  display: flex;
  overflow-y: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  // position: relative;
  padding: 0 15px;

  // :v-deep .el-card__body {
  //   // padding: 20px 0;
  //   height: 100%;
  // }

  .el-card {
    box-shadow: 10px 10px 5px #00000045;
    position: relative;
    border: 1px solid rgba($color: #ffffff, $alpha: 0.44);
    background-color: rgba($color: rgba(0, 110, 145, 1), $alpha: 1);
    height: 216px;
    // padding: 20px 0;
    width: 47%;
    margin-bottom: 18px;
    margin-left: 31.5px;
    color: #f0f0f0;

    .left {
      overflow: hidden;
      margin: 0 auto;

      .left-top {
        margin-left: 0 !important;
        text-align: center;

        img {
          display: inline-block;
          width: 130px;
          height: 130px;
          overflow: hidden;
          border-radius: 50%;
        }

        .img {
          display: inline-block;
          width: 130px;
          height: 130px;
          padding: 0px;
          overflow: hidden;
          border-radius: 50%;
          font-size: 80px;
        }
      }

      .left-bottom {
        margin-left: 0 !important;
        margin-top: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 140px;
          font-size: 14px;
        }
      }
    }

    .contents {
      ul {
        list-style-type: none;
        margin: 0;
        padding: 15px;

        li {
          margin-bottom: 22px;
          font-size: 16.5px;
          letter-spacing: 2px;
        }
      }
    }

    .right {
      overflow: hidden;
      margin: 0 auto;
      padding-top: 10px;

      .right-top {
        margin-left: 0 !important;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-start;
        // align-items: center;
        // flex-wrap: nowrap;
        text-align: center;

        img {
          display: inline-block;
          width: 100px;
          height: 100px;
          overflow: hidden;
        }
      }

      .right-bottom {
        margin-left: 0 !important;
        text-align: center;

        .sowing-right-line-one {
          font-size: 18px;
          margin-top: 5px;
          font-weight: 600;
        }

        span {
          display: inline-block;
          width: 90px;
        }
      }
    }

    .disnone {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.3);
      transform: translate(-50%, -50%);

      .disblak {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .el-button {
          text-align: center;
          // margin: 0 auto;
          padding: 0;
          width: 100px;
          height: 100px;
          border: 6px solid rgba($color: rgb(0 0 0), $alpha: 0.5);
          border-radius: 50%;

          ::v-deep span {
            display: block;
            width: 72px;
            font-size: 17px;
            white-space: pre-wrap;
            margin: 0 auto;
            letter-spacing: 1px;
            line-height: 20px;
          }
        }

        .left {
          position: relative;
          margin-right: 25px;
          width: 25px;
          height: 25px;
          background: no-repeat url("~@/assets/action-bar-icon/right.png");
        }

        .right {
          position: relative;
          margin-left: 25px;
          width: 25px;
          height: 25px;
          background: no-repeat url("~@/assets/action-bar-icon/left.png");
        }
      }

      .disblak:hover {
        .left {
          animation: lefts 1s infinite linear;
        }

        .right {
          animation: rights 1s infinite linear;
        }

        @keyframes lefts {
          from {
            left: 0px;
          }

          to {
            left: 20px;
          }
        }

        @keyframes rights {
          from {
            left: 0px;
          }

          to {
            left: -20px;
          }
        }
      }
    }
  }

  .box-card:hover {
    .disnone {
      display: block;
    }
  }
}

.contents {
  height: calc(100% - -16px) !important;
  // height: 100%;
  // overflow: hidden;
  display: flex;
  overflow-y: auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
  // position: relative;
  padding: 0 5px;

  .el-card {
    box-shadow: 10px 10px 5px #00000045;
    position: relative;
    border: 1px solid rgba($color: #ffffff, $alpha: 0.44);
    background-color: rgba($color: rgba(0, 110, 145, 1), $alpha: 1);
    height: 180px;
    // padding: 20px 0;
    margin-bottom: 30px;
    color: #f0f0f0;

    .left {
      overflow: hidden;
      margin: 0 auto;

      .left-top {
        margin-left: 0 !important;
        text-align: center;

        img {
          display: inline-block;
          width: 100px;
          height: 100px;
          overflow: hidden;
          border-radius: 50%;
        }
      }

      .left-bottom {
        margin-left: 0 !important;
        text-align: center;

        span {
          display: inline-block;
          width: 110px;
          font-size: 15px;
        }
      }
    }

    .contents {
      ul {
        list-style-type: none;
        margin: 0;
        padding: 10px;

        li {
          margin-bottom: 18px;
          font-size: 16px;
        }
      }
    }

    .right {
      overflow: hidden;
      margin: 0 auto;

      .right-top {
        margin-left: 0 !important;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-start;
        // align-items: center;
        // flex-wrap: nowrap;
        text-align: center;

        img {
          display: inline-block;
          width: 100px;
          height: 100px;
          overflow: hidden;
        }
      }

      .right-bottom {
        margin-left: 0 !important;
        text-align: center;

        .sowing-right-line-one {
          font-size: 18px;
          margin-top: 5px;
          font-weight: 600;
        }

        span {
          display: inline-block;
          width: 90px;
        }
      }
    }

    .disnone {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background-color: rgba($color: #000000, $alpha: 0.6);
      transform: translate(-50%, -50%);

      .disblak {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;

        .el-button {
          text-align: center;
          // margin: 0 auto;
          padding: 0;
          width: 100px;
          height: 100px;
          border: 6px solid rgba($color: rgb(160 165 172), $alpha: 0.6);
          border-radius: 50%;

          ::v-deep span {
            display: block;
            width: 72px;
            font-size: 17px;
            white-space: pre-wrap;
            margin: 0 auto;
            letter-spacing: 1px;
            line-height: 20px;
          }
        }

        .left {
          position: relative;
          margin-right: 25px;
          width: 25px;
          height: 25px;
          background: no-repeat url("~@/assets/action-bar-icon/right.png");
        }

        .right {
          position: relative;
          margin-left: 10px;
          width: 25px;
          height: 25px;
          background: no-repeat url("~@/assets/action-bar-icon/left.png");
        }
      }

      .disblak:hover {
        .left {
          animation: lefts 2s infinite linear;
        }

        .right {
          animation: rights 2s infinite linear;
        }

        @keyframes lefts {
          0% {
            left: 0px;
          }

          50% {
            left: 20px;
          }

          100% {
            left: 0px;
          }
        }

        @keyframes rights {
          0% {
            left: 0px;
          }

          50% {
            left: -20px;
          }

          100% {
            left: 0px;
          }
        }
      }
    }
  }
}

.body-container {
  height: 400px;
}

.label-input {
  display: flex;
}

.input-select {
  width: 270px !important;
}
